<template>
  <a-layout class="layout-demo">
    <a-layout-sider collapsible breakpoint="xl">
      <div class="logo" />

      <!-- 单击事件，点击后跳转到指定页面 -->
      <a-menu
        :default-open-keys="['BlogManagement']"
        :default-selected-keys="['BackendBlogsList']"
        :style="{ width: '100%' }"
        @menu-item-click="handleMenuItemClick"
      >
        <!-- 这里的key是路由名称，单击后跳转到指定路由 -->
        <a-sub-menu key="BlogManagement">
          <template #title> <icon-apps></icon-apps> 文章管理 </template>
          <a-menu-item key="BackendBlogsList">文章列表</a-menu-item>
          <a-menu-item key="BackendTagsList">标签列表</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="CommentManagement">
          <template #title> <IconCalendar></IconCalendar> 评论管理 </template>
          <a-menu-item key="BackendCommentsList">评论列表</a-menu-item>
        </a-sub-menu>
      </a-menu>
      <!-- trigger -->
      <template #trigger="{ collapsed }">
        <IconCaretRight v-if="collapsed"></IconCaretRight>
        <IconCaretLeft v-else></IconCaretLeft>
      </template>
    </a-layout-sider>

    <a-layout>
      <a-layout-header style="padding-left: 20px; padding-right: 20px" class="backend-header">
        <div class="backend-header-left">My 博客</div>
        <div class="backend-header-right">
          <span>
            <a-button style="margin-right: 10px">前台</a-button>
            <a-button @click="handleLogout" :loading="loading">退出&nbsp;<icon-export /></a-button>
          </span>
        </div>
      </a-layout-header>

      <a-layout style="padding: 0 24px">
        <a-breadcrumb :style="{ margin: '16px 0' }">
          <a-breadcrumb-item></a-breadcrumb-item>
        </a-breadcrumb>

        <!-- content -->
        <a-layout-content class="backend-content-class">
          <router-view></router-view>
        </a-layout-content>
        <a-layout-footer class="backend-footer-class">Footer</a-layout-footer>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script setup>
// import { defineComponent } from 'vue'
import router from '@/router'
import storage from '@/stores/storage'
import { ref } from 'vue'
import { LOGOUT } from '@/api/vblog'
import { Message } from '@arco-design/web-vue'
import { IconCaretRight, IconCaretLeft, IconCalendar } from '@arco-design/web-vue/es/icon'
import { useRouter } from 'vue-router'
const r = useRouter()

// defineComponent({
//   components: {
//     IconCaretRight,
//     IconCaretLeft,
//     IconHome,
//     IconCalendar
//   },
//   methods: {
//     onClickMenuItem(key) {
//       Message.info({ content: `You select ${key}`, showIcon: true })
//     }
//   }
// })

const loading = ref(false)
const handleLogout = async () => {
  //TODO 退出登录
  //TODO 清理本地存储

  try {
    loading.value = true
    const refreshToken = storage.value.token.refresh_token
    storage.value.token = {}
    // console.log(refreshToken)
    await LOGOUT(refreshToken)

    Message.success('退出成功')
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
    r.push({ name: 'LoginPage' })
  }
}
// 单击后跳转到指定路由
const handleMenuItemClick = async (key) => {
  // console.log(key)
  // console.log(r.getRoutes)
  // console.log(router.getRoutes())
  router.getRoutes().forEach((route) => {
    if (route.name === key) {
      // console.log(route)
      r.push({ name: key })
    }
  })

  // r.push({ name: 'NotFoundPage' })
  // router.routes.forEach((route) => {
  //   if (route.name === key) {
  //     console.log(route)
  //   }
  // })
}
</script>

<style lang="css" scoped>
.layout-demo {
  height: 100%;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider-light) .logo {
  background: var(--color-fill-2);
}

.backend-header-left {
  color: var(--color-text-2);
}

.backend-header {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
  display: flex;
  justify-content: space-between;
}

.backend-footer-class {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}

.backend-content-class {
  /* color: var(--color-text-2); */
  /* font-weight: 400; */
  /* font-size: 14px; */
  background: var(--color-bg-3);
}
.backend-content-class {
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */
  /* color: var(--color-white); */
  /* font-size: 16px; */
  /* font-stretch: condensed; */
  /* text-align: center; */
}
/* .layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
} */
/* .layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
} */
</style>
